import React from 'react';
import './index.less'
import { CountDown } from 'react-vant';
import { Cart } from '@react-vant/icons'
import {history} from 'umi'

const Xianshi = () => {
    let list1 = [
        { id: 1, nqme: '油菜约500克', peice1: 2, peice2: 3, img: 'https://img1.baidu.com/it/u=3492652070,823693851&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
        { id: 2, nqme: '菠菜赤根草约400克', peice1: 4, peice2: 5, img: 'https://img1.baidu.com/it/u=339477651,356929385&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
        { id: 3, nqme: '橙子约500克', peice1: 8, peice2: 10, img: 'https://img1.baidu.com/it/u=2340195382,875981954&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
        { id: 4, nqme: '菠萝约500克', peice1: 6, peice2: 8, img: 'https://img2.baidu.com/it/u=2150746692,2346046144&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
        { id: 5, nqme: '排骨约500克', peice1: 25, peice2: 30, img: 'https://img2.baidu.com/it/u=3255113592,390957166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375' },
        { id: 6, nqme: '黄瓜约500克', peice1: 2, peice2: 3, img: 'https://img0.baidu.com/it/u=3102240554,3017324488&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
        { id: 7, nqme: '猪头约5斤', peice1: 30, peice2: 40, img: 'https://img1.baidu.com/it/u=688465209,3554242376&fm=253&fmt=auto&app=138&f=JPEG?w=563&h=500' },
        { id: 8, nqme: '螃蟹约500克', peice1: 50, peice2: 60, img: 'https://img2.baidu.com/it/u=1400163748,4208173243&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500' },
        { id: 9, nqme: '洋葱约5斤', peice1: 6, peice2: 8, img: 'https://img0.baidu.com/it/u=1036284118,3117716747&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
        { id: 10, nqme: '牛肉约5斤', peice1: 40, peice2: 45, img: 'https://img0.baidu.com/it/u=1142932188,37873332&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500' },
    ]
    return <div className='xianshiBox'>
        <div className='headBox'>
            <img onClick={()=>history.push('/app/home')} src={require('../../../../public/wzcimg/向左箭头.svg')} alt="" />
            <span>限时抢购</span>
        </div>
        <div className='jieshuBox'>
            <span className='span1'>
                <p>距离结束</p>
                <p className='dingshi'><CountDown time={24 * 60 * 60 * 1000} /></p>
            </span>
            <span>
                <p>明日07：00</p>
                <p className='kkk'>即将开始</p>
            </span>
        </div>
        <div className='youBox'>
            {
                list1.map(item => {
                    return <div key={item.id} className='box1'>
                        <div className='img11'>
                            <img src={item.img} alt="" />
                            <p>{item.nqme}</p>
                            <div className='fooBox'>
                                <div>
                                    <p className='p1'>￥{item.peice1}.00</p>
                                    <p className='p2'>￥{item.peice2}.00</p>
                                </div>
                                <div className='right'>
                                    <Cart fontSize={'8vw'}   ></Cart>
                                </div>
                            </div>
                        </div>
                    </div>
                })
            }
        </div>
    </div>;
}

export default Xianshi;